<script setup lang="ts">
import { ref, nextTick,watch } from 'vue'
import { NIcon, NScrollbar } from 'naive-ui'
import { ChevronDown, ChevronUp, Atom2, AdjustmentsHorizontal } from '@vicons/tabler'

interface ShortcutCommand {
  name: string

  content: string
}

const props = defineProps<{
  commands: ShortcutCommand[]
  selectedCommandIndex: number
}>()

const emit = defineEmits<{
  (e: 'insert', content: string): void

  (e: 'manage'): void

  (e: 'update:selectedCommandIndex', value: number): void
}>()

const shortcutListRef = ref<InstanceType<typeof NScrollbar> | null>(null)
const showTopScrollIndicator = ref(false)
const showBottomScrollIndicator = ref(true)

function scrollToSelectedItem() {
  nextTick(() => {
    const selectedElement = document.querySelector('.model-item.active') as HTMLElement
    if (selectedElement && shortcutListRef.value) {
      shortcutListRef.value.scrollTo({
        top: selectedElement.offsetTop - 40,
        behavior: 'smooth'
      })
    }
  })
}

const handleScroll = (event: Event) => {
  const target = event.target as HTMLElement
  const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight
  const distanceToTop = target.scrollTop
  showTopScrollIndicator.value = distanceToTop > 10
  showBottomScrollIndicator.value = distanceToBottom > 10
}

watch(() => props.selectedCommandIndex, scrollToSelectedItem)

const maxHeight = ref(100)
let isDragging = ref(false)
let startY = 0
let startHeight = 0

const handleMouseDown = (e: MouseEvent) => {
  isDragging.value = true
  startY = e.clientY
  startHeight = maxHeight.value
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

const handleMouseMove = (e: MouseEvent) => {
  if (!isDragging.value) return
  const deltaY = e.clientY - startY
  //   最大高度为 200 最小高度为 50
  maxHeight.value = Math.min(180, Math.max(50, startHeight + deltaY))
}

const handleMouseUp = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
}

</script>

<template>
  <div>
    <div class="flex items-center gap-2 px-2 border-1px border-gray-300 border-b-solid py-1">
      <NIcon :component="Atom2" size="15" />
      <span>快捷指令</span>
    </div>

    <n-scrollbar ref="shortcutListRef" :style="{ maxHeight: `${maxHeight}px` }" @scroll="handleScroll">
      <div class="model-list rounded-md p-1 py-2" style="min-width: 80px">
        <div
          v-if="showTopScrollIndicator"
          class="flex items-center justify-center absolute -top-2 left-0 w-full bg-gradient-to-t from-transparent to-white"
        >
          <n-icon :component="ChevronUp" size="20" />
        </div>
        <div
          class="rounded-md model-item cursor-pointer px-2 py-1 hover:bg-gray-100"
          v-for="(command, index) in commands"
          :key="command.name"
          :class="{
            'bg-gray-300 active': index === selectedCommandIndex
          }"
          @click="emit('insert', command.content)"
        >
          <div class="flex items-center gap-1">
            <span>{{ command.name }}</span>
          </div>
        </div>
        <div
          v-if="showBottomScrollIndicator"
          class="flex items-center justify-center absolute -bottom-2 left-0 w-full h-8 bg-gradient-to-b from-transparent to-white"
        >
          <n-icon :component="ChevronDown" size="20" />
        </div>
      </div>
    </n-scrollbar>

    <div
      @click="emit('manage')"
      class="flex items-center gap-2 px-2 border-1px border-gray-300 border-t-solid py-1 cursor-pointer hover:bg-gray-100"
    >
      <NIcon :component="AdjustmentsHorizontal" size="15" />
      <span>管理指令</span>
    </div>
    <!-- 一个允许拖动的底部条 -->
    <div class="w-full h-2px  model-list-drag-handle" @mousedown="handleMouseDown">
    </div>
  </div>
</template>

<style scoped>
.model-list-drag-handle {
  cursor: row-resize;
  background-color: #e5e7eb; /* 添加一个浅灰色背景,使拖动条更明显 */
}

.model-list-drag-handle:hover {
  background-color: #d1d5db; /* 鼠标悬停时变暗 */
}
</style>